import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import JcdjcHandle from "../../../../../../utils/apis/JcdjcHandle";
import { Card ,Form,Button,Input} from "antd";

export default function JcdjcLook(){
    const id=useParams()?.id
    const [idDatas,setIdDatas]=useState();
    const [jcdDynamicForms,setJcdDynamicForms]=useState();
    const [form]=Form.useForm();
    const history=useHistory();
    const [componentDisabled, setComponentDisabled] = useState(true);
    useEffect(()=>{
        JcdjcHandle.jcdjcAddDynamicApi().then(datas=>{
            setJcdDynamicForms(datas)
        })
    },[])
    useEffect(()=>{
        JcdjcHandle.JcdjcIdDatasApi(id).then(resp=>{
            setIdDatas(resp.data)
            form.setFieldsValue({
                ...resp.data
            })
        })
    },[id,form])
    const onFinish=()=>{
        
    }
    const quxiaoHandle=()=>{
        history.push(`/manager/jcdjc`)
    }
    return<>
    <Card className='h100 fill' style={{
        overflow:"scroll"
    }}>
        <Form method="post"
            onFinish={onFinish}
            form={form}
            className="layout-v fill">
            <header style={{
                fontSize: 20,
                fontWeight: "bold"
            }}>监测点基础查看</header>
            <hr />


            <div className="InputForm" style={{
                flex:"flex",
                flexWrap:"wrap"
            }}>
                {idDatas !== undefined && jcdDynamicForms.map(formItem => {
                    let node;
                    switch (formItem.type) {
                        case 'select':
                            node = <select></select>;
                            break;
                        case 'input':
                        default:
                            node = <Input  
                            disabled={componentDisabled}
                            style={{
                              width: '90%',
                              fontSize:'15px',
                              color:'#ffffff',
                              fontWeight:'bold',
                              // backgroundColor:'transparent',
                              // opacity:'0.5'
                              
                            }}
                            

                            />
                    }
                    
                    return <div style={{
                        flexBasis:"33%",
                        marginBottom:"10px"
                    }}><Form.Item
                        label={formItem.alias}
                        name={formItem.name}
                        // rules={[{
                        //     required: true
                        // }]}
                    >{node}</Form.Item></div>
                })}
            </div>
            <div className="btn-bottom" style={{
        //   marginLeft:'240px'
        }}>
        {/* <Button type="primary"
          
        >上一条</Button>
        <Button type="primary"
          
          >下一条</Button> */}
        <Button onClick={quxiaoHandle}>返回</Button>
        </div>

        </Form>
    </Card>
</>
}